<template>
  <ul :class="{fixedTop:fixed}">
    <li>
      <span>人气</span>
    </li>
    <li>
      <span>最新</span>
    </li>
    <li>
      <span>销量</span>
    </li>
    <li>
      <span>价格</span>
      <i class="iconfont icon-paixu"></i>
    </li>
  </ul>
</template>

<script>
import _ from "lodash";
export default {
    data(){
        return{
            fixed:false
        }
    },
    mounted(){
        window.addEventListener("scroll", _.throttle(this.updateScroll , 300));
    },
    methods:{
        updateScroll(){
            let top = document.documentElement.scrollTop;
            if( top > 550 ){
                this.fixed = true;
            }else{
                this.fixed = false;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
ul {
  display: flex;
  width: 100%;
}
li {
  height: 40px;
  flex: 1;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  i {
    color: gray;
  }
}
.fixedTop {
  position: fixed;
  top: 44px;
  background-color: white;
}
</style>